<template>
    <view style="height: 100%">
        <view class="nav">
            <view :class="'nav-child ' + (filter_open ? 'active' : '')" @tap="tapFilterNav" v-if="!(dropDownMenuFilterData.length > 0 ? false : true)" data-nav="4">
                <view class="nav-title">
                    {{ selected_filter_name.length > 0 ? selected_filter_name : dropDownMenuTitle[0] }}
                </view>
                <view class="icon"></view>
            </view>
        </view>

        <view :class="'container container_hd ' + (filter_open ? 'show' : 'disappear') + ' '">
            <view class="z-height">
                <view>
                    <block v-for="(item, index) in dropDownMenuFilterData" :key="index">
                        <view :class="'between v-center sortitem ' + (selected_filter_id == item.id ? ' active ' : ' ')" :data-model="item" @tap="selectFilterItem">
                            <text :data-model="item" @tap="selectFilterItem" :class="selected_filter_id == item.id ? ' active ' : ' '">{{ item.title }}</text>
                            <image class="end" style="width: 24px; height: 24px" v-if="selected_filter_id == item.id" src="/static/file/images/right2.png"></image>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            filteropen: false,

            // 筛选
            shownavindex: '',

            selected_filter_id: 0,
            selected_filter_name: '',
            filter_open: false
        };
    },
    props: {
        dropDownMenuTitle: {
            type: Array,
            default: () => []
        },
        dropDownMenuFilterData: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        //组件生命周期函数，在组件实例进入页面节点树时执行
        attached: function () {},

        tapFilterNav: function (e) {
            if (this.filter_open) {
				this.filter_open = false;
				this.shownavindex = 0;
                
            } else { 
				this.filter_open = true;
				this.shownavindex = e.currentTarget.dataset.nav;
            }
        },

        selectFilterItem: function (e) {
            console.log(e.target.dataset.model);
            var item = e.target.dataset.model;
            if (!item) {
                return;
            }
            var selectedId = e.target.dataset.model.id;
            var selectedTitle = e.target.dataset.model.title;
            this.closeHyFilter();
			this.selected_filter_id = selectedId;
			this.selected_filter_name = selectedTitle;
          
            this.$emit('selectedItem', {
                detail: {
                    index: this.shownavindex,
                    selectedId: selectedId,
                    selectedTitle: selectedTitle
                }
            });
        },

        /**关闭筛选 */
        closeHyFilter: function () {
            if (this.filter_open) {
                this.filter_open = false;
            }
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {}
};
</script>
<style>
@import './dropdownmenu.css';
</style>
